<template>
  <div>
    <nav-bar>
      <template v-slot:left>&lt;</template>
      <template v-slot:default>用户登录</template>
    </nav-bar>
    <div style="margin-top: 50%">
      <van-form @submit="onSubmit">
        <van-field
          v-model="email"
          name="电子邮箱"
          label="电子邮箱"
          placeholder="电子邮箱"
          :rules="[{ required: true, message: '请填写电子邮箱' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <div class="link-login" @click="$router.push({ path: '/register' })">
            没有账号，立即注册
          </div>
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
      <div class="name-password">
        测试账号：ljrtest@a.com 账号密码：123123
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import { login } from "network/user";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "Register",
  components: {
    NavBar,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const userInfo = reactive({
      email: "ljrtest@a.com",
      password: "123123",
    });
    const onSubmit = (values) => {
      console.log("submit", values);
      login(userInfo).then((res) => {
        // 将token保存到本地，window.localStorage
        window.localStorage.setItem("token", res.access_token);

        // 在vuex isLogin
        store.commit("setIsLogin", true);

        // alert("登录成功");
        userInfo.email = "";
        userInfo.password = "";

        setTimeout(() => {
          router.push({ path: "/home" });
        }, 500);
      });
    };

    return {
      ...toRefs(userInfo),
      onSubmit,
    };
  },
};
</script>

<style scoped>
.link-login {
  font-size: 14px;
  margin-bottom: 20px;
  color: #42b983;
  display: inline-block;
  text-align: center;
}
</style>
